<template>
	<view>
		<view class="rezu_zhuanqu" :style="{ backgroundColor: bgcolor }">
			<!-- 热租爆品--选项卡 -->
			<view class="rezu_title1" style="font-size: 16px" v-if="!isONeDataSta">
				<!-- <v-tab paddingItem="0 26rpx 18rpx" v-model="activeTab" field="titleVice" field1="title" activeColor="white" :tabs="labelGoodslist" @change="changeTab"></v-tab> -->
				<v-tab lineHeight="6rpx" :lineScale="0.4" padding="6rpx 0 5rpx 0" paddingItem="0 24rpx" :bold="true"
					v-model="activeTab" field="title" field1='titleVice' :tabs="labelGoodslist"
					@change="changeTab"></v-tab>
			</view>
			<!-- 热租列表 -->
			<view class="rezu_list">
				<view v-for="(j, index) in goodlist" :key="index" class="re_zu"
					@click="$onTo('/pagesClass-rich/product/product?productId=' + j.itemId)">
					<image class="big-img" :lazy-load="true" mode="aspectFit" :webp="true" :src="getFirstImg(j.image)">
					</image>
					<view
						style="display: flex;flex-direction: column;align-items: flex-start;align-self: flex-start;margin-left: 15rpx;">
						<view class="re_zu_name">
							<text class="re_zu_name_text">{{ j.name }}</text>
						</view>
						<view class="re_zu_name_first1">
							<text class="shu" >{{j.labelStr || '优选好物'}}</text>
						</view>
						<view class="re_zu_n">
							<view>
								<text class="re_zu_nl">￥</text>
								{{ (j.sale/j.dayList[0].day).toFixed(2)}}/<text style="font-size: 20rpx;">天</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import {
		getUserId
	} from '../../utils';
	import {
		request
	} from '@/utils';
	export default {
		name: 'IndexZhuanQu',
		data() {
			return {
				isONeDataSta: false, //接口是否只传来一个标签数据，若是一个标签数据，就不显示当前标签。
				goodlist: [],
				zhuanqu_list: [],
				// activeTab: my.getAppIdSync().appId == "2021003136696039" ? -1 : 0, //分类当前下标
				activeTab: 0, //分类当前下标
				pageNum: 0, //商品页数
				pageSize: 10, //每一页条数
				categoryId: null, //分类二级标签id
				tabTop: 0, //分类三级商品距离顶部有多少距离
				tabList: [], //分类列表
				bgcolor: '',
				// labelGoodslist:[
				// 	{
				// 		title:'11111',
				// 		title1:'我我我我我'
				// 	},
				// 	{
				// 		title:'22222',
				// 		title1:'你你你你'
				// 	},
				// 	{
				// 		title:'33333',
				// 		title1:'踏踏踏踏踏'
				// 	},
				// 	{
				// 		title:'44444',
				// 		title1:'他他他他他'
				// 	},
				// 	{
				// 		title:'嘻嘻嘻哈哈哈哈',
				// 		title1:'哦哦哦哦哦'
				// 	},
				// 	{
				// 		title:'嘻嘻嘻哈哈哈哈111',
				// 		title1:'呀呀呀呀'
				// 	},
				// 	{
				// 		title:'大辉哥',
				// 		title1:'我我我我我就很烦无if关于覅根本WEF'
				// 	},
				// ]
			};
		},
		props: {
			// bgcolor: {
			// 	type: String,
			// 	default: "rgb(170, 23, 20)"
			// }
			labelGoodslist: {
				type: Array,
				default: []
			}
		},
		components: {},
		mounted() {
			console.log('首页传给标签产品的数据cccccc', this.labelGoodslist);
			this.goodlist = this.labelGoodslist[0].product;
			if (this.labelGoodslist && this.labelGoodslist.length == 1) {
				this.isONeDataSta = true
			} else {
				this.isONeDataSta = false
			}
			// this.labelGoodslist[0].product.forEach(item => {
			// 	console.log('hahaha', item.itemId);
			// })
		},
		created() {},
		methods: {
			//处理标签
			getBiaoqian(bianqianStr) {
				return bianqianStr.split('-')
				console.log('--处理标签', bianqianStr.split('-'));
			},
			//接口返回多个图片，只取第一个
			getFirstImg(imgsStr) {
				// console.log('接口返回多个图片，只取第一个',imgsStr.split(','));
				return imgsStr.split(',')[0]
			},
			changeTab(index) {
				console.log('当前点亮的下标是哪一个', index);
				//保存当前下标,标签样式可以变化
				this.activeTab = index;
				//重置给goodlist复制，更新商品列表展示
				this.goodlist = this.labelGoodslist[index].product;
				//重置二级分类标签下标
				// this.getGoodsList(this.tabList[index].id);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.rezu_zhuanqu {
		margin: 16rpx 0;
	}

	.rezu_title1 {
		// margin-bottom: 10rpx;
		padding: 0 20rpx;
		// position: absolute;
		position: relative;
		z-index: 1;
	}

	.rezu_list {
		//  background-color: darkcyan;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		// margin: 0 10rpx;
		padding: 0 10rpx;

		.re_zu {
			background-color: #ffffff;
			width: 48%;
			margin: 10rpx 1%;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);

			.big-img {
				pointer-events:none;
				width: 344rpx;
				height: 344rpx;
				background: #ffffff;
				// margin: 10rpx 0;
				border-radius: 10rpx 10rpx 0 0;
			}
		}

		.re_zu_name {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			// margin-bottom: 10rpx;
			// padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			width: 100%;
			margin-top: 10rpx;

			.re_zu_name_text {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				font-family: Arial;
				word-break: break-all;
			}

			.re_zu_tip {
				font-weight: 400;
			}
		}

		.re_zu_name_first {
			display: inline-block;
			color: #9f9f9f;
			font-size: 22rpx;
			// margin-left: -10rpx;
			transform: scale(0.85);

			.shu {
				display: inline-block;
			}
			.shou{
				border-right: 1rpx solid  #9f9f9f; 
				padding-right: 8rpx;
			}
			.zhong{
				border-right: 1rpx solid  #9f9f9f; 
				padding: 0 8rpx;
			}
			.wei {
				padding: 0 8rpx;
			}
		}
		.re_zu_name_first1 {
			// background-color: #c1976a;
			display: inline-block;
			color: #4a3827;
			font-size: 24rpx;
			font-weight: 600;
			// margin-left: -10rpx;
			margin-top: 10rpx;
			transform: scale(0.9);
			transform-origin: 0% 0%;
		
			.shu {
				display: inline-block;
			}
		}

		.ziyin-img {
			width: 45%;
			margin: 10rpx 0 10rpx -160rpx;
			height: 40rpx;
		}

		.re_zu_n {
			width: 90%;
			font-size: 30rpx;
			font-weight: bold;
			color: #ff0000;
			margin: 5rpx 0 20rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.re_zu_nl {
				font-size: 22rpx;
			}
		}

		.re_zu_n_show {
			font-size: 12px;
			font-weight: 500;
			color: #999999;
			text-decoration: line-through;
		}
	}
</style>